<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Document</title> 
</head> 
<body> 
    <ul class="tab"> 
        <li class="first">第一节课</li> 
        <li>第二节课</li> 
        <li>第三节课</li>  
    </ul>
    <div class="box">
        <ul style="display: block;"> 
            <li>11111111111</li>
            <li>11111111111</li>
            <li>11111111111</li>
            <li>11111111111</li>
            <li>11111111111</li>
            <li>11111111111</li>
        </ul>
        <ul>
            <li>2222222222222</li>
            <li>2222222222222</li>
            <li>2222222222222</li>
            <li>2222222222222</li>
            <li>2222222222222</li>
            <li>2222222222222</li>
        </ul>
        <ul>
            <li>33333333333333</li>
            <li>33333333333333</li>
            <li>33333333333333</li>
            <li>33333333333333</li>
            <li>33333333333333</li>
            <li>33333333333333</li>
        </ul>
    </div>
</body>
</html>
<script>  
   var tab=document.querySelector(".tab").querySelectorAll("li") 
   console.log(tab) 
   var box=document.querySelector(".box").querySelectorAll("ul") 
   console.log(box)  

   for(var i=0;i<tab.length;i++){ 
        //添加一个索引值  
        tab[i].index=i 
        tab[i].onmouseover=function(){  
             console.log("111111") 
             for(var a=0;a<tab.length;a++){ 
                   tab[a].className="" 
                   console.log(this) 
                   this.className="first" 
             }
             for(var b=0;b<box.length;b++){ 
                   box[b].style.display="none" 
                   console.log(this.index)  
                   box[this.index].style.display="block"  
             }
        }
   }
</script>
<style>
    .tab{
        width: 400px;
        height: 30px;
        line-height: 30px;
        background-color: black;
        color: white;
        display: flex;
    }
    .tab li{
        padding: 0 15px;
        list-style: none;
    }
    .first{
        background-color: white;
        color: black;
    }
    .box ul{
        display: none;
    }

</style>